
    class Details{
        constructor(){
            this.cont = document.querySelector(".box");
            this.center = document.querySelector(" main .cont1 .center")
            this.em = document.querySelector("main .top em")
            this.box =document.querySelector("main .center .box")
            this.url = "http://localhost/ylf/json/list.json";
            this.load();
            this.getId();
            this.addEvent();
        }
        getId(){
            // 获取地址栏的url后拼接的数据
            this.id = location.search.slice(1).split("=")[1];
        }
        load(){
            // 请求商品数据库：json
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
                //console.log(res)
            })
            
        }
        display(){
            // 将接收到的商品id和商品数据中的id作比较
            this.res.forEach(val => {
                if(val.goodsId === this.id){
                    //console.log(val);
                    // 根据val的数据内容化，渲染商品详情页
                    this.cont.innerHTML = "没有找到商品";
                    this.cont.innerHTML = `
                    <div class="magnifier">
                        <ul class="list">
                            ${this.createLi(val.img.smallImg)}
                        </ul>
                        <div class="s_box">
                            <img src="${val.img.largeImg[0]}" alt="">
                            <span></span>
                            <p class="mask"></p>
                        </div>
                        <div class="b_box">
                            <img src="${val.img.largeImg[0]}" alt="">
                        </div>
                        <span class="clear"></span>
                    </div>
                    <div class="goodsMsg" index="${val.goodsId}">
                        <h1>${val.h1}</h1>
                            <div class="active">
                                <span>￥${val.span}</span><s>参考价 ${val.s}</s></p>
                                <p>促销: <mark>${val.mark}</mark> ${val.i}</p>
                            </div>
                            <h5>名称: <span>${val.p}</span></h5>
                            <h5>品牌: <span>${val.h5}</span></h5>
                            <h5>上架时间: <span>${val.time}</span></h5>
                            <h5>商品编号: <span>${val.goodsId}</span></h5>
                            <input type="button" class="btn" value="加入购物车">
                            <a href = "cart.html"><input type = "button" class= "add" value = "去结算"></a>
                            
                    </div>`;
                    // 页面渲染完成后，可以执行放大镜的效果了
                    // 执行放大镜时，将遍历到的数据，传入，方便切换大图
                    new Large(val.img);
                    this.center.innerHTML = `
                        ${this.img(val.superImg)}
                    `
                    this.em.innerHTML = `
                        ${val.p}
                    `
                }
            });
        }
        addEvent(){
            var that = this;
            //console.log(this.center)
            this.box.onclick = function(eve){
                let e = eve || window.event;
                let target = e.target || e.srcElement;
                if(target.className === "btn"){
                    that.goodsId = target.parentNode.getAttribute("index");
                    console.log(that.goodsId)
                    that.setDate();
                    alert("加入购物车成功")
                }
            }
        }
        setDate(){
            var dt = getCookie("data");
            console.log(dt)
            //console.log(dt);
            if(dt == ""){
                dt = [{
                    goodsId:this.goodsId,
                    sum:1,
                    msg:this.getData(this.goodsId)
                }]
            }else{
                dt = JSON.parse(dt);
                console.log(dt)
                var index = 0;
                for(var i=0; i<dt.length;i++){
                    if(dt[i].goodsId === this.goodsId){
                        dt[i].sum++;
                        index = 1;
                        break;
                    }
                }
                if(index == 0){
                    dt.push({goodsId:this.goodsId,
                        sum:1,
                        msg:this.getData(this.goodsId) })
                }
            }
            setCookie("data",JSON.stringify(dt),{expires:30})
        }
        getData(id){
            console.log(this.goodsId)
            for(var i=0;i<this.res.length;i++){
                if(this.res[i].goodsId == id){
                    return this.res[i];
                }
            }
                return "";
        }
        
        createLi(arr){
            // 根据小图的数量生成对应的结构的功能
            let str = "";
            for(let i=0;i<arr.length;i++){
                str += `<li><img src="${arr[i]}" alt=""></li>`
            }
            return str;
        }
        img(arr){
            let str = "";
            for(let i=0;i<arr.length;i++){
                str += `<img src="${arr[i]}" alt="">`
            }
            return str;
        }
    }
    new Details;


    class Large{
        constructor(imgData){
            this.sBox = document.querySelector(".s_box");
            this.sImg = document.querySelector(".s_box img");
            this.sSpan = document.querySelector(".s_box span");
            this.bBox = document.querySelector(".b_box");
            this.bImg = document.querySelector(".b_box img");
            this.li = document.querySelectorAll(".list li");

            this.imgData = imgData;
            
            this.addEvent();
        }
        addEvent(){
            var that = this;
            this.sBox.onmouseover = function(){
                that.over();
            }
            this.sBox.onmousemove = function(eve){
                var e = eve || window.event;
                that.move(e);
            }
            this.sBox.onmouseout = function(){
                that.out();
            }
            for(let i=0;i<this.li.length;i++){
                this.li[i].onclick = function(){
                    that.sImg.src = that.imgData.largeImg[i];
                    that.bImg.src = that.imgData.largeImg[i];
                }
            }
        }
        over(){
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
        }
        move(e){
            // 因为页面结构日渐复杂，所以将pageX改回offsetX，但是灰色小滑块会抖，解决方式，纯布局结局
            var l = e.offsetX - this.sSpan.offsetWidth/2;
            var t = e.offsetY - this.sSpan.offsetHeight/2;
            if(l<0) l=0;
            if(t<0) t=0;
            if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
            this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
        }
        out(){
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }

    $("main .xia").find("li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(".cont").children("div").css("display","none").eq($(this).index()).css("display","block");

    })
